<style lang="stylus">
.task-wrapper
  padding-bottom 110px
  padding-top 178px
  .back
    left 36px
    top 99px
    width 200px
    height 29px
    padding-left 30px
    background url("../assets/search/icon_back.png") no-repeat
    background-size 16px 29px
  .title-bar
    width 100%
    top 0
    padding-top 50px
    line-height 128px
    background url("../assets/index/index_header_03.jpg")
    background-size cover
    max-width 750px;/*no*/
    margin 0 auto
  .task-title
    height 118px
    padding-left 120px
    &.new
      background url("../assets/task/new_hands.png") no-repeat 44px center
      background-size 46px 48px
    &.common
      background url("../assets/task/common.png") no-repeat 44px center
      background-size 46px 48px
  .task-item
    height 118px
    &.normal::before
      content ''
      display block
      width 20px
      height 20px
      background url("../assets/task/dot.png") no-repeat
      background-size cover
      margin-right 14px
    &:not(.normal)
      background-color #f7f7f7
  .score
    color #ff0000
  .btn
    line-height 50px
    border-radius 25px
    background linear-gradient(90deg, #fc8d01, #fd5400)
    &.done
      background #cecece
  .score-type
    width 38px
    height 39px
    background-size cover
    &.point
      background-image url("../assets/task/coin.png")
    &.cash
      background-image url("../assets/task/cash.png")
  .hide
    display none
</style>

<template lang="pug">
.task-wrapper
  .title-bar.center.white.fz-32.bold.fixed 有奖任务
  .back.fz-32.white.fixed.flex(@click="onBack") 返回
  .task-list
    .task(v-for="(task, index) in tasks", :key="index")
      .task-title.flex.bdb.fz-36.bold(:class="task.key") {{task.title}}
      .task-item.flex.bdb(v-for="(item, innerIndex) in task.data", :key="innerIndex", @click="onToggleDesc(item, index, innerIndex)",
        :class="{normal: !item.showButton, 'pdh-24': item.showButton, 'hide': item.hide, 'pdh-44': !item.showButton}")
        template(v-if="!item.showButton")
          .fz-26 {{item.title}}
          .flex-1
          .fz-20.score +{{item.score}}
          .score-type.mgl-24(:class="{point: item.scoreType === SCORE_TYPE.POINT, cash: item.scoreType === SCORE_TYPE.CASH}")
        template(v-else)
          .fz-26 {{item.intro}}
          .flex-1
          .fz-24.white.btn.center.pdh-24(v-if="item.remark", @click="onClickBtn(item)", :class="{done: item.state === 1}") {{item.remark.btnName}}
</template>

<script>
import { CHANNEL } from '../const'

const TASK_TYPE = {
  NEW_HAND: 1,
  COMMON: 2
}

const SCORE_TYPE = {
  POINT: 1,
  CASH: 2 // 红包
}

export default {
  name: 'Task',

  data: () => ({
    selectedTab: CHANNEL.TASK,
    tasks: [],
    SCORE_TYPE
  }),

  mounted() {
    this.loadTasks()
  },

  methods: {
    loadTasks() {
      this.$get('/task/list').then(tasks => {
        const newHand = []
        const common = []
        tasks.forEach(task => {
          if (task.type === TASK_TYPE.NEW_HAND) {
            newHand.push(task)
            if (task.intro) {
              const remark = JSON.parse(task.remark || null)
              newHand.push({
                ...task, remark, showButton: true, hide: !(remark && remark.btnName.indexOf('立即邀请') !== -1)
              })
            }
          } else if (task.type === TASK_TYPE.COMMON) {
            common.push(task)
            if (task.intro) {
              common.push({
                ...task, remark: JSON.parse(task.remark || null), showButton: true, hide: true
              })
            }
          }
        })

        this.tasks = [
          {
            key: 'new',
            title: '新手任务',
            data: newHand
          }, {
            key: 'common',
            title: '日常任务',
            data: common
          }]
      })
    },

    onClickBtn(item) {
      if (item.state === 1) {
        return
      }
      this.onItemDispatch(item.remark)
    },

    onToggleDesc(item, index, innerIndex) {
      if (typeof item.hide !== 'undefined') {
        return
      }
      const targetItem = this.tasks[index].data[innerIndex + 1]
      targetItem.hide = !targetItem.hide
    }
  }
}
</script>
